<template>
  <div>
    <main>
      <!-- 用户信息列表 -->
      <div class="left">
        <!-- 用户头像 -->
        <div class="awatar">
          <div class="imgshow"><img :src="userInfo.image" alt="" /></div>
          <div class="username">{{ userInfo.nickname }}</div>
        </div>
        <!-- 个人中心 -->
        <div class="tabs">
          <div>
            <el-menu
              :default-active="activeIndex"
              class="el-menu-vertical-demo"
              active-text-color="#ff5342"
              @select="handleSelect"
              router
            >
              <!-- 个人设置 -->
              <el-menu-item
                @click="saveNavActive('userinfo')"
                index="userinfo"
                class="center"
              >
                <i class="iconfont icon-yingyongzhongxin"></i>
                <span slot="title"> 个人中心 </span>
              </el-menu-item>
              <div class="title">个人设置</div>
              <el-menu-item
                @click="saveNavActive('userprofile')"
                index="userprofile"
              >
                <i class="iconfont icon-gerenziliao"></i>
                <span slot="title"> 个人资料 </span>
              </el-menu-item>
              <el-menu-item @click="saveNavActive('toVip')" index="toVip">
                <i class="iconfont icon-vip"></i>
                <span slot="title"> 开通VIP </span>
              </el-menu-item>
              <el-menu-item
                @click="saveNavActive('courseorder')"
                index="courseorder"
              >
                <i class="iconfont icon-weibiaoti-"></i>
                <span slot="title"> 课程订单 </span>
              </el-menu-item>
              <!-- 我的课程 -->
              <div class="title">我的课程</div>
              <el-menu-item
                @click="saveNavActive('regcourselist')"
                index="regcourselist"
              >
                <i class="iconfont icon-wp-sj"></i>
                <span slot="title"> 已报课程 </span>
              </el-menu-item>
              <el-menu-item @click="saveNavActive('playback')" index="playback">
                <i class="iconfont icon-dianbohuifang"></i>
                <span slot="title"> 课程回放 </span>
              </el-menu-item>
              <!-- 学习中心 -->
              <div class="title">学习中心</div>
              <el-menu-item @click="saveNavActive('record')" index="record">
                <i class="iconfont icon-chengji1"></i>
                <span slot="title"> 成绩分析 </span>
              </el-menu-item>
              <el-menu-item
                @click="saveNavActive('studyplan')"
                index="studyplan"
              >
                <i class="iconfont icon-jihua"></i>
                <span slot="title"> 学习计划 </span>
              </el-menu-item>
              <!-- 我的作业 -->
              <div class="title">我的作业</div>
              <el-menu-item
                @click="saveNavActive('myhomework')"
                index="myhomework"
              >
                <i class="iconfont icon-wendangxiugai"></i>
                <span slot="title"> 我的作业本 </span>
              </el-menu-item>
              <el-menu-item
                @click="saveNavActive('checkhomework')"
                index="checkhomework"
              >
                <i class="iconfont icon-lishijilu"></i>
                <span slot="title"> 查看作业批改 </span>
              </el-menu-item>
              <!-- 我的消息 -->
              <div class="title">我的消息</div>
              <el-menu-item @click="saveNavActive('message')" index="message">
                <i class="iconfont icon-lingdang"></i>
                <span slot="title"> 消息列表 </span>
              </el-menu-item>
              <!-- 我的下载 -->
              <div class="title">我的下载</div>
              <el-menu-item
                @click="saveNavActive('jjdownload')"
                index="jjdownload"
              >
                <i class="iconfont icon-wendangxiazai"></i>
                <span slot="title"> 预测机经下载 </span>
              </el-menu-item>
              <el-menu-item
                @click="saveNavActive('mbdownload')"
                index="mbdownload"
              >
                <i class="iconfont icon-xiazai"></i>
                <span slot="title"> 学习资料下载 </span>
              </el-menu-item>
            </el-menu>
          </div>
        </div>
      </div>
      <div class="right">
        <!-- 路由占位符 -->
        <router-view></router-view>
      </div>
    </main>
  </div>
</template>

<script>
import userUtil from "@/utils/userUtil";

export default {
  data () {
    return {
      userInfo: {},
      activeIndex: '' // 激活高亮侧边
    }
  },
  created () {
    if (userUtil.isNotLogin()) {
      this.$router.push("toLogin")
    }

    this.userInfo = userUtil.get()
    this.activeIndex = window.sessionStorage.getItem('activeIndex')
  },
  methods: {
    // 对 activeIndex 进行赋值
    saveNavActive (activeIndex) {
      window.sessionStorage.setItem('activeIndex', activeIndex)
      this.activeIndex = activeIndex
    },
    handleSelect (key, keyPath) {
      console.log(key, keyPath)
    }
  }
}
</script>

<style lang="less" scoped>
body {
  background-color: #f7f7f7;
}
main {
  width: 75rem;
  margin: 3.125rem auto 9.375rem;
  display: flex;
  justify-content: space-between;
  .left {
    position: relative;
    width: 15.625rem;
    height: 68rem;
    background: #ffffff;
    box-sizing: border-box;
    box-shadow: 0px 0px 0.625rem 0px rgba(0, 0, 0, 0.03);
    .awatar {
      height: 10.9375rem;
      border-bottom: 1px solid #eee;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      .imgshow {
        width: 5.625rem;
        height: 5.625rem;
        background-color: turquoise;
        margin-top: 1.875rem;
        margin-left: 5rem;
        border-radius: 50%;
        img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }
      .username {
        color: #333333;
        line-height: 3.125rem;
        width: 100%;
        text-align: center;
        margin-left: 0;
      }
    }
    .tabs {
      /deep/.el-menu-item.is-active {
        border-right: 0.375rem solid #ff5e4e;
      }
      .el-menu {
        border-right: none;
      }
      .el-menu-item {
        font-size: 1.125rem;
      }
      .iconfont {
        margin-right: 0.625rem;
        margin-left: 2.125rem;
        font-size: 1.25rem;
        color: #999;
      }
      .title {
        font-size: 1.125rem;
        color: #333;
        font-weight: bold;
        margin-left: 1.25rem;
      }
      .center {
        height: 4.375rem;
        line-height: 4.375rem;
        font-size: 1.125rem;
        color: #333;
        text-align: left;
      }
    }
  }
  .right {
    width: 56.875rem;
    // overflow: hidden;
    border-radius: 0.3125rem;
    background: #ffffff;
    padding-bottom: 6.25rem;
  }
}
</style>
